(function(plugIn) {

  jsx3.$O(plugIn).extend({

    paint: function(layout) {
    
      var Wizard = com.tibco.amx.Wizard;
      var WizardPane = com.tibco.amx.WizardPane;
      //alert('Wizard:' + Wizard)
      var wizard = this._wizard = new Wizard();
      wizard.setRandomAccess(true);

      jsx3.$A(["pane1", "pane2", "pane3", "pane4"]).each(jsx3.$F(function(e) {
        var rsrc = this.getResource(e);
        var images = rsrc.attr("images"); // custom images, usually we don't need it.
        images = images ? images.split(/\s+/g) : [];
        var pane = new WizardPane(rsrc, this, {title:rsrc.attr("title"), images:images});
        wizard.addPane(pane);
      }).bind(this));

      layout.paintChild(layout.getWizardContainer()); //this expression is necessary!
      wizard.renderIn(layout.getWizardContainer());

      wizard.subscribe(Wizard.CANCEL, this, function() {
        var _alerter = this.getServer();
        var _doClose = function() {
          layout.getDialog().doClose();
          var d = _alerter.alert(null, "Canceled!");
          /* window.setTimeout(function(){
            d.doClose();
          }, 600); */
        };
        if(wizard._session.toArray().length > 0)
          _alerter.confirm('Confirm Dialog', 'The WizardSession is changed. Do you really want to cancel?', 
          function(d){
            d.doClose();
            _doClose();
          });
        else
          _doClose();
      });

      wizard.subscribe(Wizard.FINISH, this, function() {
        layout.getDialog().doClose();
        var session = wizard.getSession();
        var s = ['<strong>Return Values:</strong><br/>'];
        for (var f in session)
          s.push("<strong>" + f + "</strong> : " + session[f]);
        this.getServer().alert("<strong>Finished!</strong>", "<br/>" + s.join('<br/>') + "<br/>", null, null, {width:600, height:400});
      });
    },
    
    getWizard: function() {
      return this._wizard;
    }
    
  });

})(this);
